import { Button, Modal, Input, Form } from "antd";
import { connect } from "react-redux";

const mapStateProps = (state) => {
  return { status: state.status, visible: state.visible };
};
const mapDispatchToprops = (dispatch) => {
  return {
    add(value) {
      dispatch({
        type: "add",
        task: value,
      });
    },
    changeVisible() {
      dispatch({
        type: "changeVisible",
        // task: value,
      });
    },
    updata(value) {
      dispatch({
        type: "updata",
        task: value,
      });
    },
  };
};
const App = (props) => {
  const { form, status, visible, add, changeVisible, updata } = props;

  const showDrawer = () => {
    changeVisible();
  };
  const handleOk = async () => {
    const res = await form.validateFields();
    if (status) {
      updata(res);
    } else {
      add(res);
    }
    changeVisible();
    form.resetFields();
  };
  const handleClose = () => {
    changeVisible();
  };

  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        添加
      </Button>
      <Modal
        title="添加"
        visible={visible}
        onOk={handleOk}
        onCancel={handleClose}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="name"
            name="name"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="age" name="age">
            <Input />
          </Form.Item>
          <Form.Item label="address" name="address">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default connect(mapStateProps, mapDispatchToprops)(App);
